﻿<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.4/video-js.min.css" rel="stylesheet">
</head>
<body>
<div id="app" style="margin: 0px auto; padding: 40px 60px 60px 60px; background: #F3F5F4">

    <el-row>
        <el-col :span="24">
            <div class="grid-content" style="margin-top: 10px; margin-bottom: 10px">

                <h1 style="text-align: center">行人重识别系统</h1>
            </div>
        </el-col>
    </el-row>

    <el-row style="margin-top: 40px" v-loading="loading"
            element-loading-text="正在检索数据">
        <el-col :span="12">

            <el-card class="box-card" shadow="hover" style="height: 500px; margin-right: 20px">
                <div slot="header" class="clearfix">
                    <span>检索信息设置</span>
                    <el-button style="float: right; padding: 8px 15px" type="success"
                               @click="retrieve_data">开始检索
                    </el-button>
                </div>

                <div class="grid-content">

                    <el-form ref="form" label-position="left">

                        <el-form-item label="请选择检索类型:">

                            <el-radio-group v-model="retrieve_type">
                                <el-radio label="image" border size="mini">图片文件</el-radio>
                                <el-radio label="video" border size="mini">视频文件</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="请选择结果展示类型:">

                            <el-radio-group v-model="result_type">
                                <el-radio label="image" border size="mini">显示图片</el-radio>
                                <el-radio label="video" border size="mini">显示视频</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="请输入结果显示数量:">

                            <el-input-number v-model="result_count" :min="1" :max="50"
                                             label="请输入结果显示数量"></el-input-number>

                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12" v-loading="upload_video_loading"
                element-loading-text="正在处理视频文件">
            <el-card class="box-card" shadow="hover" style="height: 500px" v-if="retrieve_type === 'video'">
                <div slot="header" class="clearfix">
                    <span>选择检索视频</span>

                    <label class="el-button el-button--success" style="float: right; padding: 8px 15px"
                           v-on:click="reset_select_video"
                           type="success" v-if="video_select_image">重新选择视频</label>
                </div>
                <div class="grid-content">


                    <div style="text-align: center ">
                        <el-upload
                                style="margin-top: 50px"
                                v-if="!video_select_image"
                                class="upload-demo"
                                drag
                                action="/api/storage/image_file_models/video/"
                                :before-upload="on_upload_video_before_upload"
                                :on-error="on_upload_video_error"
                                :on-success="on_upload_video_success">

                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将视频文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>

                        <el-image :src="video_select_image"  ref="el_image_video" v-if="video_select_image">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </div>
                </div>
            </el-card>

            <el-card class="box-card" shadow="hover" style="height: 500px" v-if="retrieve_type === 'image'">
                <div slot="header" class="clearfix">
                    <span>选择检索图片</span>

                    <label class="el-button el-button--success" for="uploads" style="float: right; padding: 8px 15px"
                           type="success">选择图片</label>

                    <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
                           accept="image/png, image/jpeg, image/gif, image/jpg"
                           @change="select_cup_img($event, 1)">
                </div>

                <div class="grid-content">
                    <div class="cut">
                        <vue-cropper ref="cropper"
                                     :img="option.img"
                                     :output-size="option.size"
                                     :output-type="option.outputType"
                                     :info="true"
                                     :full="option.full"
                                     :can-move="option.canMove"
                                     :can-move-box="option.canMoveBox"
                                     :fixed-box="option.fixedBox"
                                     :original="option.original"
                                     :auto-crop="option.autoCrop"
                                     :auto-crop-width="option.autoCropWidth"
                                     :auto-crop-height="option.autoCropHeight"
                                     :center-box="option.centerBox"
                                     :high="option.high"
                                     @img-load="imgLoad"
                        ></vue-cropper>
                    </div>

                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">

            <el-card class="box-card" style="margin-top: 20px; min-height: 500px" shadow="hover">

                <div slot="header" class="clearfix">
                    <span>检索结果</span>
                </div>
                <div class="grid-content">

                    <el-row v-if="show_result">
                        <el-col :span="24">


                            <div class="grid-content">


                                <div  v-for="item in image_result" v-if="result_type ==='image'" class="el-image"
                                      style="width: 200px;  margin: 10px; text-align: center" >
                                    <el-image style="width: 200px; height: 400px;" v-on:click="play_video(item.name)" :src="item.img"></el-image>
                                    <p>{{item.d}}</p>
                                    <p>{{item.name}}</p>
                                </div>

                                <div v-for="(item,i) in video_result" :key="i" v-if="result_type==='video'"
                                     style=" margin: 10px; width: 320px; text-align: center" class="el-image">
                                    <video :id="'video'+item.index" class="video-js"
                                           style="width: 300px; height: 200px; display: inline-block;">
                                        <source :src="item.src" type="video/mp4">
                                    </video>
                                    <p>{{item.d}}</p>
                                    <p>{{item.f}}s</p>
                                    <p>{{item.name}}</p>
                                </div>


                                </video>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-col>
        </el-col>
    </el-row>

    <el-dialog title="请选择需要检索的图片" :visible.sync="videoImageListDialogVisible">
        <el-image v-for="item in video_image_list" v-on:click="video_image_select_click"
                  style="width: 100px; height: 150px; margin: 5px"
                  :src="item"
        ></el-image>
    </el-dialog>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--import Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.4/video.min.js"></script>

<script>


    const base_api = "/api/storage/";

    Vue.use(window['vue-cropper'])

    const main = new Vue({
        el: '#app',
        data: function () {
            return {
                retrieve_type: 'image',
                result_type: 'image',
                result_count: 1,

                imageUrl: '',
                show_result: true,
                loading: false,
                display_result: 'black',

                image_result: [],
                video_result: [],

                video_select_image: '',
                video_image_list: [],
                videoImageListDialogVisible: false,
                upload_video_loading: false,


                // cut image
                option: {
                    img: '',
                    size: 1,
                    full: false,
                    outputType: 'png',
                    canMove: true,
                    fixedBox: false,
                    original: false,
                    canMoveBox: true,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 320,
                    autoCropHeight: 320,
                    centerBox: false,
                    high: true
                },
                model: false,
                modelSrc: '',
            }
        },
        methods: {

            retrieve_data() {
                if (this.retrieve_type === 'image') {

                    if (this.option.img === '') {

                        alert('请选择需要检索的图片');
                        return
                    }

                    this.$refs.cropper.getCropData((data) => {
                        this.model = true;
                        this.modelSrc = data;
                        this.loading = true;
                        this.post_img_retrieve_data(data);
                    })

                } else if (this.retrieve_type === 'video') {

                    if (this.$refs.el_image_video.src === '') {
                        alert('请选择需要检索的图片');
                        return
                    }

                    let canvas = document.createElement('canvas');
                    let img = document.createElement('img');
                    img.src = this.$refs.el_image_video.src;

                    img.onload = () => {
                        canvas.height = img.height;
                        canvas.width = img.width;
                        let ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        let data = canvas.toDataURL();
                        canvas = null;
                        this.loading = true;
                        this.post_img_retrieve_data(data);
                    };

                    img.onerror = error => {
                        alert('请重新选择需要检索的图片');
                    }
                }
            },

            post_img_retrieve_data(img) {

                _this = this;

                _this.image_result = [];
                _this.video_result = []

                axios.post(base_api + "image_file_models/", {

                    img_64: img,
                    retrieve_type: this.retrieve_type,
                    result_count: this.result_count,
                    result_type: this.result_type,

                }, {timeout: 1000 * 60 * 10})
                    .then(function (response) {
                        // handle success
                        _this.loading = false;
                        _this.result_type = response.data.result_type;
                        if (_this.result_type === 'image') {

                            _this.image_result = response.data.data;
                        } else {

                            _this.video_result = response.data.data;
                            setTimeout(function () {

                                _this.init_video_s()
                            }, 200)
                        }

                    })
                    .catch(function (error) {
                      _this.loading = false;
                      _this.$message.error('检索任务执行失败');
                    })
                    .finally(function () {
                        this.loading = false
                        // always executed
                    });

            },
            select_cup_img(e, num) {
                //上传图片
                // this.option.img
                var file = e.target.files[0]
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                    return false
                }
                var reader = new FileReader()
                reader.onload = (e) => {
                    let data
                    if (typeof e.target.result === 'object') {
                        // 把Array Buffer转化为blob 如果是base64不需要

                        data = window.URL.createObjectURL(new Blob([e.target.result]))
                        let img_tag = document.createElement('img')
                        img_tag.src = data
                        img_tag.onload = () => {
                          // this.option.autoCropWidth = img_tag.width > 320 ? 320 : img_tag.width
                          // this.option.autoCropHeight= img_tag.height > 320 ? 320 : img_tag.height
                            this.option.autoCropWidth = img_tag.width
                            this.option.autoCropHeight= img_tag.height

                        }
                    } else {
                        data = e.target.result
                    }
                    if (num === 1) {
                        this.option.img = data
                    }
                }
                // 转化为base64
                // reader.readAsDataURL(file)
                // 转化为blob
                reader.readAsArrayBuffer(file)
            },

            imgLoad(msg) {
                console.log(msg)
            },


            // 视频相关
            on_upload_video_success(response, file, fileList) {

                this.upload_video_loading = false;
                this.video_image_list = response;
                this.videoImageListDialogVisible = true;
                this.video_select_image = "";
                console.log(response)
            },

            on_upload_video_error(response, file, fileList) {

              this.upload_video_loading = false;
              _this.$message.error('视频处理任务任务执行失败');
            },
            on_upload_video_before_upload(file) {

                this.upload_video_loading = true;
            },

            video_image_select_click(event) {
                this.video_select_image = event.target.src;
                this.videoImageListDialogVisible = false;
                this.video_image_list = [];

            },
            reset_select_video() {

                this.video_select_image = "";
            },

            init_video_s() {

                _this.video_result.map((item, i) => {
                    let myPlayer = videojs('video' + item.index, {
                        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                        controls: true,
                        //自动播放属性,muted:静音播放
                        autoplay: "muted",
                        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                        preload: "auto",
                        //设置视频播放器的显示宽度（以像素为单位）
                        width: "800px",
                        //设置视频播放器的显示高度（以像素为单位）
                        height: "400px",
                        //封面图
                        poster: item.pic
                    });
                })
            },
            play_video(item){

                console.log(item)
                window.open('/videos_db/' + item.slice(item.indexOf('-') + 1, item.lastIndexOf('-')))
            },

        }
    })

</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 0px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 250px;
        height: 250px;
        line-height: 250px;
        text-align: center;
    }

    .avatar {
        width: 250px;
        height: 250px;
        display: block;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .cut {
        width: 400px;
        height: 400px;
        margin: 0px auto;
    }

    .model img {
        display: block;
        margin: auto;
        max-width: 80%;
        user-select: none;
        background-position: 0px 0px, 10px 10px;
        background-size: 20px 20px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
    }

    @keyframes slide {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100% 0;
        }
    }

</style>
</html>